<template>
	<div class="gou">
		<van-nav-bar :fixed="true"
      right-text="管理"
      left-arrow
		  title="购物车"
      @click-left="onClickLeft"
		  @click-right="onClickRight"
		/>
    <van-checkbox-group @change="change" class="card-goods" v-model="result" ref="checkboxGroup">
          <van-checkbox
            class="card-goods__item"
            v-for="(item,i) in cartlist"
            :key="item.id"
            :name="item.pid"
          >
          <div class="num">
            <span @click.stop='reducecount(i)'>-</span>
            {{item.pnum}}
            <span @click.stop='addcount(i)'>+</span>
          </div>
            <van-card
              :title="item.pname"
              :desc="item.pdesc"
              :price="formatPrice(item.pprice*100)"
              :thumb="item.pimg"
            />
          </van-checkbox>
        </van-checkbox-group>
         <van-submit-bar
            v-if='keat1'
            :button-text="submitBarText"
            @submit="onSubmit"
         >
         <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
         <p class="ji">合计金额：<span>￥{{price}}</span></p>

         </van-submit-bar>
         <van-submit-bar
         v-if='keat2'
            :button-text="submitBarText1"
            @submit="onDelete"
         >
         <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
         </van-submit-bar>
	</div>
</template>

<script>
	import * as api from '../api/getProlist.js'
	export default{
		name:'Cart',
		data(){
			return{
				checked:false,
				value: '',
				cartlist:[],
        result:[],
        count:'',
        price:0,
        show:'false',
        num:0,
        keat1:true,
        keat2:false,
        l:0,
        submitBarText1:'删除',
        count1:''
			}
		},
    computed:{
      submitBarText() {
        if(this.count==''){
          return '结算'
        }else{
          return '结算' +'('+ this.count+')'
        }
      },
    },
		methods:{
      change(data){
        console.log(data)
        this.count=data.length;
        let resArr=[]
        for(let i=0;i<data.length;i++){
          let obj=this.cartlist.find(v=>v.pid==data[i])
          resArr.push(obj)
        }
        console.log(resArr)
        let count = 0;
        resArr.forEach(v=>count+=v.pnum*v.pprice)
        console.log(count)
        // let num=0;
        // resArr.forEach(v=>num=v.pnum)
        // console.log(num)

         this.price=count

        if(data.length==this.cartlist.length){
          this.checked=true
        }else{
          this.checked=false
        }

      },
      formatPrice(pprice) {
        return (pprice / 100).toFixed(2);
      },

      checkAll() {
        console.log(this.cartlist)
        // let count=0
        this.cartlist.forEach(v=>
        console.log(v.pnum)
        )
        // this.price=count
        this.num++
        if(this.num%2!==0){
          this.$refs.checkboxGroup.toggleAll(true);
        }else{
          this.$refs.checkboxGroup.toggleAll();
        }
      },
      onClickLeft(){
      this.$router.go(-1)
      },
			onClickRight() {
            this.l++
            if(this.l%2!=0){
              this.keat1=false
              this.keat2=true
            }else{
              this.keat1=true
              this.keat2=false
            }
			},
      onDelete(){
        console.log(this.result)
        this.count1=this.result;
        console.log(this.count1)
        let obj=this.cartlist.find(v=>v.pid==this.count1)

        api.getDeletelist({uid:localStorage.getItem('uid'),pid:obj.pid}).then((data)=>{
          console.log(data)
        })
        window.location.reload()
      },
			onSubmit(){
        if(this.count!=''){
          console.log(this.cartlist)
          console.log(this.result)
          this.$router.push('/settle/'+this.result)
        }
			},
      //点击减号减少购物车商品数量
      reducecount(index){
        if(this.cartlist[index].pnum>1){
          this.cartlist[index].pnum--
          this.price=this.price-this.cartlist[index].pprice*1
        }
          api.getUpdatacart({uid:localStorage.getItem('uid'),pid:this.cartlist[index].pid,pnum:this.cartlist[index].pnum}).then((data)=>{
            // this.price=this.price-this.cartlist[index].pprice*this.cartlist[index].pnum
          })
      },
      //点击加号增加购物车商品数量
      addcount(index){
        this.cartlist[index].pnum++
        api.getUpdatacart({uid:localStorage.getItem('uid'),pid:this.cartlist[index].pid,pnum:this.cartlist[index].pnum}).then((data)=>{
          this.price=this.cartlist[index].pprice*1+this.price
        })

      },
		 },
		mounted() {
			api.askcart({id:localStorage.getItem('uid')}).then((data)=>{
				this.cartlist=data.data.data
        console.log(this.cartlist)
        this.cartlist.reverse()
			});


		}
	}
</script>

<style scoped="">
  .van-card{
    width: 320px;
  }
  .van-submit-bar__bar{
    width: 355px;
    padding-left: 10px;
    position: fixed;
    display: flex;
    justify-content: space-between;
    top: 85%;
    left: 0;
  }
  .gou >>> .van-checkbox-group{
   padding: 0 10px;
    height: 506px;
    overflow: auto;
  }
	.van-icon-arrow-left{
	  color: #FFFFFF;
	  font-size: 20px;
	}
  .van-nav-bar--fixed{
    background: #feae47;
  }
  .van-nav-bar__text{
    font-size: 16px;
    color: #FFFFFF;
  }
	.van-nav-bar__title{
	  font-size: 20px;
    width: 60px;
    color: #FFFFFF;
	}
  .van-button--normal{
    padding: 0;
    background:#fff ;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
	.gou >>> .van-checkbox__icon--checked .van-icon{
    background: #FEAE47;
    border-color:#FEAE47 ;
  }
  .van-button--danger{
    border-radius: 40px;
    background:#FAB811;
    border-color:#FAB811 ;
    height: 40px;
    line-height: 30px;
  }
  .van-checkbox{
    position: relative;
  }
  .num{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 80px;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 1;
   right: 0;
   top: 60%;
   font-size: 16px;
  }
  .num span{
    display: inline-block;
    width: 20px;
  }
  .num span:nth-child(1){
    border-right: 1px solid #ccc;
  }
  .num span:nth-child(2){
    border-left: 1px solid #ccc;
  }
  .van-card__price{
    margin-top: 20px;
  }
  .ji{
    margin-left: 50px;
  }
  .ji span{
    color: red;
  }
</style>
